import Base from './Base';
import { GRAPH_TYPES } from './Graph.enum.js';

/**
 * Quadratic
 */

class Quadratic extends Base {
    constructor({ pos } = {}) {
        super(...arguments);
        this.name = GRAPH_TYPES.QUADRATIC;
        if (!this.points || !this.points.length) this.points = [pos, pos, pos];
    }
    createPath() {
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, 5, 0, Math.PI * 2, false);
    }
    initUpdate(start, end) {
        let a = Math.round(Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2))) / 2,
            x1 = start.x + (end.x - start.x) / 2,
            y1 = start.y - a * 1.5;
        this.points[1] = { x: parseInt(x1), y: parseInt(y1) };
        this.points[2] = { x: parseInt(end.x), y: parseInt(end.y) };
        this.x = (this.points[0].x + this.points[1].x + this.points[2].x) / 3;
        this.y = (this.points[0].y + this.points[1].y + this.points[2].y) / 3;
    }

    drawController(scaling) {
        this.drawControlLine();
        super.drawController(scaling);
    }

    drawControlLine() {
        this.ctx.save();
        // this.ctx.lineWidth = 0.5;
        this.ctx.lineWidth = this.lineWidth / 2;
        this.ctx.strokeStyle = '#00f';
        let yr = this.isReverse ? -1 : 1;

        //画控制点的连线
        this.ctx.beginPath();
        this.ctx.moveTo(this.points[0].x, this.points[0].y * yr);
        this.ctx.lineTo(this.points[1].x, this.points[1].y * yr);
        this.ctx.lineTo(this.points[2].x, this.points[2].y * yr);
        this.ctx.stroke();
        this.ctx.restore();

        // this.ctx.save();
        // this.ctx.lineWidth = this.lineWidth / 2;
        // this.ctx.strokeStyle = '#999';
        // //画连接点和控制点
        // this.points.forEach(point => {
        //     this.ctx.beginPath();
        //     this.ctx.arc(point.x, point.y * yr, 5, 0, Math.PI * 2, false);
        //     this.ctx.stroke();
        // });
        // this.ctx.restore();
    }

    drawPath(ctx) {
        // console.log('Quadratic.drawPath: ', ctx);
        ctx.lineWidth = this.lineWidth;
        ctx.strokeStyle = this.strokeStyle;
        ctx.beginPath();
        let yr = this.isReverse ? -1 : 1;
        ctx.moveTo(this.points[0].x, this.points[0].y * yr);
        ctx.quadraticCurveTo(this.points[1].x, this.points[1].y * yr, this.points[2].x, this.points[2].y * yr);
        // ctx.closePath();
        // ctx.stroke();
        // ctx.restore();
    }

    drawSelected(ctx) {
        // console.log('Quadratic.drawSelected: ', ctx);
        if (ctx) this.ctx = ctx;
        this.ctx.save();
        // this.ctx.lineWidth = this.lineWidth;
        // this.ctx.strokeStyle = this.strokeStyle;
        this.drawPath(this.ctx);
        this.ctx.stroke();
        this.ctx.restore();
    }

    draw(ctx) {
        if (ctx) this.ctx = ctx;

        this.ctx.save();
        // this.ctx.beginPath();
        // let yr = this.isReverse ? -1 : 1;
        // this.ctx.moveTo(this.points[0].x, this.points[0].y * yr);
        // this.ctx.quadraticCurveTo(this.points[2].x, this.points[2].y * yr, this.points[1].x, this.points[1].y * yr);
        this.drawPath(this.ctx);
        this.ctx.stroke();
        this.ctx.restore();

        //绘制平移/更新图形锚点基准点
        // this.drawAnchorPoint();
        //绘制未连接点 - 未避免车辆绘制，修改到Painter中调用
        // this.drawUnConnectPoints();
    }

    drawCached(ctx) {
        ctx.save();
        // this.drawPath(ctx);
        let penSize = 1 / this.scaling || 100;
        // ctx.fillStyle = Color.lightenDarkenColor(this.fillStyle, 0.3);
        // ctx.fill();
        ctx.lineWidth = penSize * 5;
        ctx.strokeStyle = 'rgba(0, 0, 255, 0.6)';
        ctx.setLineDash([penSize * 10, penSize * 10]);
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.restore();
    }
    drawCenter(scaling) {
        this.x = (parseInt(this.points[0].x) + parseInt(this.points[1].x) + parseInt(this.points[2].x)) / 3;
        this.y = (parseInt(this.points[0].y) + parseInt(this.points[1].y) + parseInt(this.points[2].y)) / 3;
        // console.log('Bezier.drawCenter-this.points[0].x,y:', this.points[0].x, this.points[0].y);
        // console.log('Bezier.drawCenter-this.points[3].x,y:', this.points[1].x, this.points[1].y);
        // console.log('Bezier.drawCenter-x,y:', this.x, this.y, this.isReverse);
        super.drawCenter(scaling);
    }
    _getPathDescription(points) {
        let d = 'M' + points[0].x + ',' + points[0].y;
        d += ' Q' + points[1].x + ',' + points[1].y;
        d += ' ' + points[2].x + ',' + points[2].y;
        return d;
    }
    getSVGCodes() {
        // <path fill="none" stroke-linecap="round" stroke="rgba(0,0,211,0.62)" d="M-30000,85000C-27652,85000 -27652,80000 -30000,80000 " stroke-width="100"></path>
        let codes = '<path fill="none" stroke-linecap="round" ';
        codes += 'stroke="' + this.strokeStyle + '" ';
        codes += 'stroke-width="' + this.lineWidth + '" ';
        codes += 'd="' + this._getPathDescription(this.points) + '" ';
        codes += '></path>';
        return codes;
    }
}
export default Quadratic;
